<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<link type="text/css" rel="stylesheet" href="<c:url value='/js/common/jquery-ui-1.8.23.custom/jquery-ui-1.8.23.custom.css'/>"/>
<script src="<c:url value='/js/common/jquery-ui-1.8.23.custom/jquery-ui-1.8.23.custom.min.js'/>"></script>
<script type="text/javascript">
	$(document).ready(function(){
		getProvince();
		 
		$.getJSON($WEB_ROOT_PATH + "/address/getProvince", function(data) {
	        $("#proName").autocomplete({
	            autoFocus : true,
	            minLength : 1,
	            source : data.data,
	            focus : function(e, ui) {
	            	$("#proId").val(ui.item.id);
	            	
	            }
	        });
	     });
	});
	
	var url = $WEB_ROOT_PATH + '/address/getCity/';
	var shengji,shiji,xianji,xzjd,xxdz;
	//获取省级
	function getProvince(){
		$.ajax({
			url:url+"1/"+"0",
			type:"POST",
			dataType:"json",
			success:function(data){
				if(data.success){
					var list = data.data;
					var html="";
					for(var i =0;i<list.length;i++){
						html +="<option value='"+list[i].code+"'>"+list[i].name+"</option>";
					}
					$("#shengji").append(html);
				}
			}
		});
		$("#xxdz_div").hide();
	}
	
	//获取市级
	function getCity(obj){
		var parentId = $(obj).val();
		$.ajax({
			url:url+"2/"+parentId,
			type:"POST",
			dataType:"json",
			success:function(data){
				if(data.success){
					var list = data.data;
					var html="<option value='-1'>-请选择-</option>";
					for(var i =0;i<list.length;i++){
						html +="<option value='"+list[i].code+"'>"+list[i].name+"</option>";
					}
					$("#shiji").empty().append(html);
					html="<option value='-1'>-请选择-</option>";
					$("#xianji").empty().append(html);
					$("#xzjd").empty().append(html);
				}
			}
		});
		shengji = $(obj).find("option:checked").text();
		if(shengji=='-请选择-'){
			shengji="";
		}
		$("#xxdz_div").hide();
		$("#address").empty().append(shengji);
	}
	
	
	//获取县级
	function getCounty(obj){
		var parentId = $(obj).val();
		$.ajax({
			url:url+"3/"+parentId,
			type:"POST",
			dataType:"json",
			success:function(data){
				if(data.success){
					var list = data.data;
					var html="<option value='-1'>-请选择-</option>";
					for(var i =0;i<list.length;i++){
						html +="<option value='"+list[i].code+"'>"+list[i].name+"</option>";
					}
					$("#xianji").empty().append(html);
					html="<option value='-1'>-请选择-</option>";
					$("#xzjd").empty().append(html);
				}
			}
		});
		shiji = $(obj).find("option:checked").text();
		if(shiji=='-请选择-'){
			shiji="";
		}
		$("#xxdz_div").hide();
		$("#address").empty().append(shengji+" "+shiji);
	}
	
	//获取乡镇街道
	function getXZJD(obj){
		var parentId = $(obj).val();
		$.ajax({
			url:url+"4/"+parentId,
			type:"POST",
			dataType:"json",
			success:function(data){
				if(data.success){
					var list = data.data;
					var html="<option value='-1'>-请选择-</option>";
					for(var i =0;i<list.length;i++){
						html +="<option value='"+list[i].code+"'>"+list[i].name+"</option>";
					}
					$("#xzjd").empty().append(html);
				}
			}
		});
		xianji = $(obj).find("option:checked").text();
		if(xianji=='-请选择-'){
			xianji="";
		}
		$("#xxdz_div").hide();
		$("#address").empty().append(shengji+" "+shiji+" "+xianji);
	}
	
	function getAddress(obj){
		xzjd = $(obj).find("option:checked").text();
		if(xzjd=='-请选择-'){
			xzjd="";
		}
		$("#address").empty().append(shengji+" "+shiji+" "+xianji+" "+xzjd);
		$("#xxdz_div").show();
		
	}
	function getXXDZ(obj){
		xxdz = $(obj).val();
		$("#address").empty().append(shengji+" "+shiji+" "+xianji+" "+xzjd+" "+xxdz);
	}
</script>
<label>省份名称：</label><input type="text"  id="proName" value="" style="line-height:20px; width:300px;"><br/><br/>             
<label>省份Code：</label><input type="text" id="proId" value=""><br/><br/>
<label>省级：</label>
<select id="shengji" onchange="getCity(this)">
	<option value="-1">-请选择-</option>
</select>
<label>市级：</label>
<select id="shiji" onchange="getCounty(this)">
	<option value="-1">-请选择-</option>
</select>
<label>县级：</label>
<select id="xianji" onchange="getXZJD(this)">
	<option value="-1">-请选择-</option>
</select>
<label>乡、镇、街道：</label>
<select id="xzjd" onchange="getAddress(this)">
	<option value="-1">-请选择-</option>
</select>
<div id="xxdz_div">
	<br/><br/>
	<label>详细地址：</label>
	<br/>
	<textarea id="xxdz" style="width: 500px; height: 60px;" onkeyup="getXXDZ(this)"></textarea>
</div>

<h1 id="address"></h1>